<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div{
			width: 180px;
			height: 180px;
			background-color: skyblue;
			position: absolute;
			left: 186px;
			top: 107px;
			border: 1px solid red;
			opacity: 0.2;
		}
    </style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <script type="text/javascript">
        var b1 = document.getElementById("box1");
        var b2 = document.getElementById("box2");
        var b3 = document.getElementById("box3");
        
		animate(b1,{"left": 500,"top" : 200,"opacity" : 1},1600);
		animate(b2,{"left": 200,"top" : 800,"opacity" : 1},2600);
		animate(b3,{"left": 500,"top" : 765,"opacity" : 1},3600);

        function animate(elem, targetJson, time){
            if(window.navigator.userAgent.indexOf("MSIE") != -1)
            {
                var interval = 50;
            }else{
                var interval = 10;
            }

            var sempJson = {};
            for(var key in targetJson)
            {
                //获取起始css里面的位置
                sempJson[key] = parseFloat(fetchComputedStyle(elem,key));
            }
            var maxcount = time / interval;
			var count = 0;

            //计算步长 步长结果放入json
            var buchang = {}; 
            for(var key in sempJson)
            {
                targetJson[key] = parseFloat(targetJson[key]);
                buchang[key] = (targetJson[key] - sempJson[key])/maxcount;
            }
            console.log(buchang);
            //targetJson  目的地json信息
            //sempJson    起始地json信息
            //buchang     步长的json信息
            var timer = setInterval(function(){
                count++;
                for(var k in sempJson)
                {
                    sempJson[k] += buchang[k];
                    if(k != "opacity")
                    {
                        elem.style[k] = sempJson[k] + "px";
                    }else{
                        elem.style[k] = targetJson[k];
                        elem.style.filter = "alpha(opacity" + (targetJson[k]*100) + ")";
                    }
                }
                if(maxcount == count)
                {
                    clearInterval(timer);   
                }         
            },interval);

            function fetchComputedStyle(obj , property){
				//能力检测
				if(window.getComputedStyle){
					//现在要把用户输入的property中检测一下是不是驼峰，转为连字符写法
					//强制把用户输入的词儿里面的大写字母，变为小写字母加-
					//paddingLeft  →  padding-left
					property = property.replace(/([A-Z])/g , function(match,$1){
						return "-" + $1.toLowerCase();
					});
					return window.getComputedStyle(obj)[property];
				}else{
					//IE只认识驼峰，我们要防止用户输入短横，要把短横改为大写字母
					//padding-left  → paddingLeft 
					property = property.replace(/\-([a-z])/g , function(match,$1){
						return $1.toUpperCase();
					});
					return obj.currentStyle[property];
				}
			}
        }
    </script>
</body>
</html>
